<template>
  <div>
    <div class="donConent" id="donConent">
      <p class="title">{{ title }}</p>
      <p class="introduce">{{ introduce }}</p>
      <p
        :style="{ 'max-height': status ? textHeight : '' }"
        :class="{ statusText: status }"
        class="context"
        ref="desc"
        v-html="context"
      ></p>
      <p
        @click="status = !status"
        v-if="idShowText"
        :class="{ openSpan: status }"
        class="openClose"
      >
        {{ status ? "查看更多" : "收起" }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { res } from "vue";

const textHeight = res([]);

const calculateText = () => {
  let twoHeight = 26 * 30; // 这个是30行
  let curHeight = this.context.length;
  if (curHeight > twoHeight) {
    this.status = true;
    this.idShowText = true;
  } else {
    this.status = false;
    this.idShowText = false;
  }
};

export default {
  data() {
    return {
      // textHeight: "",
      status: false,
      idShowText: false,
    };
  },
  methods: {
    // 超过折叠行
    calculateText() {
      //这是默认两行数据的高度，一行的高度可以自定义 可以*3*4达到三行或者四行显示展示和收起的效果
      // let twoHeight = 26 * 30; // 这个是30行
    //   this.textHeight = `${twoHeight}px`;
    //   let curHeight = this.context.length;
    //   if (curHeight > twoHeight) {
    //     this.status = true;
    //     this.idShowText = true;
    //   } else {
    //     this.status = false;
    //     this.idShowText = false;
    //   }
    // },
  },
  mounted() {
    // 超出部分折叠隐藏
    this.$nextTick(() => {
      setTimeout(() => {
        this.calculateText();
      }, 300);
    });
  },
};
</script>

<style scoped lang="scss">
.openClose {
  font-size: 16px;
  width: 100%;
  height: 20px;
  padding: 12px 0;
  text-align: center;
}
.openSpan {
  position: absolute; /* 记得在上级加上 position: relative; */
  left: 0;
  color: #000;
  bottom: 0;
  font-size: 16px;
  width: 100%;
  height: 20px;
  padding: 15px 0;
  font-weight: bold;
  text-align: center;
  box-shadow: 10px 0 20px 20px #fff;
  background-color: #fff;
}
.statusText {
  overflow: hidden;
  display: block;
}
</style>
